<template>
  <!--    字符串类型-->
  <el-input
    v-if="type_id === 5"
    v-model="input"
    :placeholder="placeholder"
    :disabled="isEnable"
    size="mini"
  ></el-input>
  <!--    整数类型-->
  <el-input
    v-else-if="type_id === 10"
    v-model.number="input"
    :placeholder="placeholder"
    @change="toInteger"
    :disabled="isEnable"
    size="mini"
  ></el-input>
  <!--    浮点类型-->
  <el-input
    v-else-if="type_id === 15"
    v-model.number="input"
    :placeholder="placeholder"
    :disabled="isEnable"
    size="mini"
  ></el-input>
  <!--    布尔类型-->
  <el-switch
    v-model="isActive"
    v-else-if="type_id === 20"
    active-text="是"
    inactive-text="否"
    :disabled="isEnable"
    size="mini"
  ></el-switch>
  <!--    日期类型-->
  <el-date-picker
    v-else-if="type_id === 25"
    v-model="input"
    type="date"
    placeholder="选择日期"
    value-format="yyyy-MM-dd"
    :disabled="isEnable"
    class="full-width"
    size="mini"
  >
  </el-date-picker>
  <!--    日期时间类型-->
  <el-date-picker
    v-else-if="type_id === 30"
    v-model="input"
    type="datetime"
    placeholder="选择日期时间"
    value-format="yyyy-MM-dd HH:mm:ss"
    :disabled="isEnable"
    class="full-width"
    size="mini"
  >
  </el-date-picker>
  <!--    单选框类型-->
  <el-radio-group
    v-else-if="type_id === 35"
    v-model="input"
    :disabled="isEnable"
    size="mini"
  >
    <el-radio
      v-for="(RItem, RIndex) in field_choice"
      :key="RIndex"
      :label="RIndex"
      >{{ RItem }}
    </el-radio>
  </el-radio-group>
  <!--    多选框类型-->
  <el-checkbox-group
    v-else-if="type_id === 40"
    v-model="checkList"
    :disabled="isEnable"
    size="mini"
  >
    <el-checkbox
      v-for="(GItem, GIndex) in field_choice"
      :key="GIndex"
      :label="GIndex"
      >{{ GItem }}
    </el-checkbox>
  </el-checkbox-group>
  <!--   下拉列表类型-->
  <el-select
    v-else-if="type_id === 45 || type_id === 50"
    :multiple="type_id === 50"
    v-model="input"
    :placeholder="placeholder"
    :disabled="isEnable"
    size="mini"
    class="full-width"
  >
    <el-option
      v-for="(OItem, OIndex) in field_choice"
      :key="OIndex"
      :label="OItem"
      :value="OIndex"
    >
    </el-option>
  </el-select>
  <!--   文本域类型-->
  <el-input
    v-else-if="type_id === 55"
    v-model="input"
    type="textarea"
    :autosize="{ minRows: 2, maxRows: 6 }"
    :disabled="isEnable"
    size="mini"
    :placeholder="placeholder"
  >
  </el-input>
  <!--   富文本类型-->
  <my-quill-editor
    v-else-if="type_id === 58"
    v-model="input"
    :disabled="isEnable"
  ></my-quill-editor>
  <!--   用户名下拉列表类型-->
  <el-select
    v-else-if="type_id === 60 || type_id === 70"
    :multiple="type_id === 70"
    v-model="input"
    :placeholder="placeholder"
    :disabled="isEnable"
    size="mini"
    class="full-width"
  >
    <el-option
      v-for="OItem in userList"
      :key="OItem.id"
      :label="OItem.username"
      :value="OItem.id"
    >
    </el-option>
  </el-select>
  <!--   上传文件类型-->
  <div v-else-if="type_id === 80">
    <el-button type="text" size="mini" v-if="isEnable" @click="open(input)"
      >{{ input }}
    </el-button>
    <el-upload
      v-else
      class="upload-demo"
      :action="action"
      :limit="1"
      :on-exceed="handleExceed"
      :on-success="handleAvatarSuccess"
      :file-list="fileList"
    >
      <el-button size="mini" type="primary" plain>点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import api from "@/api/index";
import MyQuillEditor from "@/components/Common/myQuillEditor";

export default {
  components: {
    MyQuillEditor
  },
  // model:{
  //     prop:"input",
  //     event:"change"
  // },
  props: {
    type_id: {
      default: 5,
      type: Number
    },
    placeholder: {
      default: "",
      type: String
    },
    field_choice: {
      type: [Array, Object]
    },
    value: {
      type: [String, Number, Boolean],
      default: null
    },
    isEnable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
     // input: this.value,
      fileList: [],
      userList: [],
      isActive: this.value
    };
  },
  watch: {
    // input(val) {
    //   this.changeValue(val);
    // },
    checkList(val) {
      this.changeValue(val.join(","));
    },
    isActive(val) {
      this.changeValue(val);
    },
    value(val) {
      if (this.type_id === 60 || this.type_id === 70) {
        this.getUserList();
      }
      // if (typeof val=="string" && val.indexOf(",") != -1) {
      //   this.checkList = val.split(",");
      // } else {
      //   this.input = this.value;
      // }
    }
  },
  created() {
  },
  computed: {
    action() {
      return process.env.VUE_APP_BASE_API + "/api/upload_file/";
    },
    checkList:{
      get(){
        return this.value&&typeof this.value == "string"?this.value.split(","):[]
      },
      set(v){
        this.$emit("input", v.join(","));
      }
    },
    input:{
      get(){
        return this.value
      },
      set(v){
        this.$emit("input", v);
      }
    }
  },
  methods: {
    toInteger() {
      let reg = /^[0-9]+$/;
      if (!reg.test(this.input)) {
        this.$message.warning("只能输入整数");
        // 用以在dom渲染挂载后重新触发dom渲染挂载
        this.$nextTick(() => {
          this.input = parseInt(this.input);
        });
      }
    },
    // 获取用户列表数据
    getUserList() {
      api.getAllSimpleUser().then(res => {
        this.userList = res.data.value;
      });
    },
    // 文件超出个数限制时的钩子
    handleExceed() {
      this.$message.warning("只能上传单个文件");
    },
    changeValue(val) {
      this.$emit("input", val);
    },
    handleAvatarSuccess(res) {
      if (res.code == 0) {
        this.changeValue(res.data.file_path);
      }
    },
    open(url) {
      window.open(url);
    }
  }
};
</script>
<style lang="scss" scoped>
.quill-editor {
  height: 400px;

  ::v-deep.ql-container,
  .ql-editor {
    height: calc(100% - 126px);
  }
}
::v-deep.el-input,.el-textarea{
  font-size: 14px;
}
::v-deep.el-input.is-disabled {
  .el-input__inner {
    color: #495060 !important;
  }
}
::v-deep.el-select {
  .el-input.is-disabled {
    .el-input__inner {
      color: #495060 !important;
    }
  }
}
::v-deep.el-radio.is-disabled {
  .el-radio__label {
    color: #495060 !important;
  }
  .el-radio__input.is-disabled.is-checked {
    .el-radio__inner {
      background-color: #495060 !important;
    }
  }
}
::v-deep.el-textarea.is-disabled .el-textarea__inner{
  color: #495060 !important;
}
</style>
